<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<html>
<head>
<c:url value="/resources/css/bootstrap.min.css" var="cssUrl" />
<c:url value="/resources/js/jquery-1.10.2.min.js" var="jqueryUrl"/>
<c:url value="/resources/js/bootstrap-typeahead.js" var="jsTypeHeadUrl" />
<c:url value="/resources/js/states.js" var="jsStates" />

<script type="text/javascript" src="${jqueryUrl}"></script>
<script type="text/javascript" src="${jsTypeHeadUrl}"></script>
<script type="text/javascript" src="${jsStates}"></script>

<script type="text/javascript">
	$(function() {
		
		var searchParamsLang = "${searchParams.language}";
		
		$('#txtZipCode').typeahead({
			/* ajax : {
				url : '${pageContext.request.contextPath}/getZipCodes',
				timeout : 500,
				method : 'get',
				triggerLength : 2,
				displayField : 'content',
				preDispatch : function(query) {
					return {
						query : query,
						lang : searchParamsLang
					};
				}
			}, */
			 source: mySource,
			display : 'content',
			val : 'content',
			items : 8,
			itemSelected : displayZipCodeResult
		});


	});	
	function displayZipCodeResult(item, val, text) {
		$('#txtZipCode').val(val);
		$("#txtStreetCode").removeAttr("disabled", "disabled");
		$('#txtStreetCode').val("");
		$("#hiddenStreetCode").val("");
		$("#txtStreetCode").focus().select();
	}

</script>


<link rel="stylesheet" href="${cssUrl}" type="text/css" />
</head>
<body>

Hello ${person.firstName} ${person.lastName}<br><br><br>


Pick one State: 
<input id="txtZipCode" >
</body>
</html>